import React, { useEffect, useState } from "react";
import "./style.scss";
import { CloseOutlined } from "@ant-design/icons";
import { Button, Space, Row, Col, Input, Radio } from "antd";
import { ListRawState } from "../../types";
interface PropsType {
  show: boolean;
  onOK: Function;
  onCancel: Function;
  title?: string
  editItem?: ListRawState
}

const ModalTable: React.FC<PropsType> = ({ show, onOK, onCancel, title, editItem }) => {
  const [item, setItem] = useState<ListRawState>({
    name: "",
    type: "",
    state: "",
    tip: "",
    createDateTime: new Date().toLocaleString(),
    updateDateTime: new Date().toLocaleString(),
    id: new Date().getTime().toString(),
  });
  const types = [
    "sys_normal_disable",
    "sys_user_sex",
    "sys_show_hide",
    "sys_yes_no",
  ];

  // 副作用
  useEffect(() => {
    if(editItem) {
      setItem(editItem)
    }
  }, [editItem])
  return (
    <div className={show ? "modal show" : "modal"}>
      <div className="my-content">
        <h3 className="right-close">
          <span>{ title || '模态框标题' }</span>
          <CloseOutlined onClick={() => onCancel()} />
        </h3>
        <div className="con">
          <Row className="middle">
            <Col span={4}>字典编号：</Col>
            <Col span={20}>
              <Input
                disabled
                value={item.id}
                onChange={(e) =>
                  setItem({
                    ...item,
                    id: e.target.value,
                  })
                }
              ></Input>
            </Col>
          </Row>
          <Row className="middle">
            <Col span={4}>字典名称：</Col>
            <Col span={20}>
              <Input
                value={item.name}
                onChange={(e) =>
                  setItem({
                    ...item,
                    name: e.target.value,
                  })
                }
              ></Input>
            </Col>
          </Row>
          <Row className="middle">
            <Col span={4}>字典类型：</Col>
            <Col span={20}>
              <Radio.Group
                value={item.type}
                onChange={(e) => {
                  setItem({
                    ...item,
                    type: e.target.value,
                  });
                }}
              >
                {types.map((v, i) => {
                  return (
                    <Radio key={i} value={v}>
                      {v}
                    </Radio>
                  );
                })}
              </Radio.Group>
            </Col>
          </Row>
          <Row className="middle">
            <Col span={4}>字典类型：</Col>
            <Col span={20}>
              <Radio.Group
                value={item.state}
                onChange={(e) => {
                  setItem({
                    ...item,
                    state: e.target.value,
                  });
                }}
              >
                <Radio value="正常">正常</Radio>
                <Radio value="异常">异常</Radio>
              </Radio.Group>
            </Col>
          </Row>
          <Row className="middle">
            <Col span={4}>备注：</Col>
            <Col span={20}>
              <Input
                value={item.tip}
                onChange={(e) =>
                  setItem({
                    ...item,
                    tip: e.target.value,
                  })
                }
              ></Input>
            </Col>
          </Row>
        </div>
        <div className="bottom">
          <Space>
            <Button type="primary" onClick={() => onOK(item)}>
              确定
            </Button>
            <Button type="primary" danger onClick={() => onCancel()}>
              取消
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default ModalTable;
